<template>
  <div class="lsc-traindetails">
    <mt-header :title="trainName">
      <router-link :to="toTrain" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div class="van-steps van-steps--horizontal" v-if="!isTrain">
      <div class="van-steps__items van-steps__items--alone">
        <div class="van-step van-hairline van-step--horizontal">
          <div class="van-step__circle-container">
            <i 
              class="mintui mintui-field-success" 
              :class="[{'lsc-train_status' : trainDetails.train_status==0}]"></i>
          </div>
          <div class="van-step__title" :class="[{'lsc-train_status' : trainDetails.train_status==0}]">未开始</div>
          <div class="van-step__line"></div>
        </div>
        <div class="van-step van-hairline van-step--horizontal">
          <div class="van-step__circle-container">
            <i 
              class="mintui mintui-field-success" 
              :class="[{'lsc-train_status' : trainDetails.train_status==1}]"></i>
          </div>
          <div class="van-step__title" :class="[{'lsc-train_status' : trainDetails.train_status==1}]">培训中</div>
          <div class="van-step__line"></div>
        </div>
        <div class="van-step van-hairline van-step--horizontal">
          <div class="van-step__circle-container">
            <i 
              class="mintui mintui-field-success" 
              :class="[{'lsc-train_status' : trainDetails.train_status==2}]"></i>
          </div>
          <div class="van-step__title" :class="[{'lsc-train_status' : trainDetails.train_status==2}]">已结束</div>
          <div class="van-step__line"></div>
        </div>
      </div>
    </div>
    <div class="lsc-traindetails-box">
      <dl>
        <dt><span>培训简介</span></dt>
        <dd>{{ trainDetails.synopsis || '暂无内容' }}</dd>
        <dt><span>培训内容</span></dt>
        <dd v-html="trainDetails.train_content || '暂无内容'"></dd>
        <dt><span>培训时间</span></dt>
        <dd>{{ trainDetails.train_date || '暂无内容' }}</dd>
        <dt><span>培训地点</span></dt>
        <dd>{{ trainDetails.train_address || '暂无内容' }}</dd>
        <dt><span>注意事项</span></dt>
        <dd>{{ trainDetails.attention || '暂无内容' }}</dd>
      </dl>
    </div>
    <train-button
      :hasList=isTrain
      :trainStatus="trainDetails.train_status"
      :enrollStatus="trainDetails.enroll_status"
      :trainFee="trainDetails.price"
      :entryNum="trainDetails.enroll_count"
      :surplusNum="trainDetails.surplus_count"
      :entryDate="trainDetails.enroll_date" 
      @handle-button="handleEnroll(trainDetails.train_id)" />
  </div>
</template>

<script>

import api from '../api';
import TrainButton from '../components/Trainbutton'

export default {
  name: 'traindetails',
  components: {TrainButton},
  data () {
    return {
      trainName: this.$route.query.trainName,
      toTrain: this.$route.query.isTrain==0 ? 'train' : 'trainlist',
      isTrain: this.$route.query.isTrain==0 ? false : true,
      trainDetails: {}
    }
  },
  created() {
    this.getTrainDetails()
  },
  methods: {
    getTrainDetails() {
      this.axios.get(api.train.TrainDetail, {
        params: {train_id: this.$route.query.train_id}
      })
        .then((res) => {
          this.trainDetails = res.data.data
        })
    },
    handleEnroll(train_id) {
      this.$indicator.open({
        text: '加载中...',
        spinnerType: 'fading-circle'
      });
      this.axios.post(api.train.Enroll, {train_id: train_id})
        .then((res) => {
          this.$indicator.close();
          if (res.data.retcode != 0) {
            this.$toast({
              message: res.data.retmsg,
              position: 'bottom'
            })
          }else {
            this.getTrainDetails()
          }
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.lsc-traindetails {
  background: #fff;
}
.lsc-traindetails .lsc-train_status {
  color: #06bf04;
}
.van-step {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
  font-size: 14px;
  position: relative;
  color: #999;
}

.van-step--horizontal {
    float: left
  }

.van-step--horizontal:first-child .van-step__title {
  -webkit-transform: none;
          transform: none;
  margin-left: 0;
}

.van-step--horizontal:last-child {
  position: absolute;
  right: 10px;
  width: auto;
}

.van-step--horizontal:last-child .van-step__title {
  -webkit-transform: none;
          transform: none;
  margin-left: 0;
}

.van-step--horizontal:last-child .van-step__circle-container {
  left: auto;
  right: -9px;
}

.van-step--horizontal:last-child .van-step__line {
  width: 0;
}

.van-step--horizontal .van-step__circle-container {
position: absolute;
top: 28px;
left: -8px;
padding: 0 8px;
background-color: #fff;
z-index: 1;
}

.van-step--horizontal .van-step__title {
-webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
display: inline-block;
margin-left: 3px;
}

.van-step--horizontal .van-step__line {
  position: absolute;
  left: 0px;
  top: 30px;
  width: 100%;
  height: 1px;
  background-color: #e5e5e5;
}

.van-step--horizontal.van-step--finish {
  color: #333;
}

.van-step--horizontal.van-step--finish .van-step__circle, .van-step--horizontal.van-step--finish .van-step__line {
  background-color: #06bf04;
}

.van-step--horizontal.van-step--process {
  color: #333;
}

.van-step--horizontal .van-step__circle-container {
  top: 22px;
}

.van-step--horizontal.van-step--process .van-icon {
  color: #06bf04;
  display: block;
}

.van-step .van-step__circle {
  display: block;
  width: 5px;
  height: 5px;
  background-color: #888;
  border-radius: 50%;
}

.van-steps--horizontal {
  padding: 10px;
  border-bottom: 10px solid #f2f2f2;
}

.van-steps--horizontal .van-steps__items {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  margin: 0 0 10px;
  overflow: hidden;
  position: relative;
  padding-bottom: 22px
}

.van-steps--horizontal .van-steps__items.van-steps__items--alone {
  padding-top: 10px;
}

.lsc-traindetails-box {
  padding: 20px 0;
  margin-bottom: 40px;
}
.lsc-traindetails-box>dl>dt {
  border-bottom: 4px solid #26a2ff;
  width: 75px;
}
.lsc-traindetails-box>dl>dt>span {
  font-weight: 600;
  display: inline-block;
  padding-left: 10px;
  padding-bottom: 3px;
}
.lsc-traindetails-box>dl>dd {
  padding: 10px;
  line-height: 24px;
}
.lsc-traindetails-box>dl>dd::after {
  display: block;
  content: '';
  height: 20px;;
}

</style>
